<template>
	<div class="alertBox">
		<div class="alertBk"></div>
		<div class="wordBox">
			<div class="alertHead">
				<p class="tittle">红包统计详情</p>
				<div class="myClose" @click="closeAlert">
					<img src="~_assets/close.png" class="myClose"/>
				</div>
			</div>
			<div class="alertBody">
				<div class="changeDiv">
					<p class="alertText">会员手机号:</p>
					<input type="text" class="alertInput" placeholder="会员手机号" readonly v-model="phone_num"/>
				</div>
				<div class="changeDiv">
					<p class="alertText">红包金额:</p>
					<input type="text" class="alertInput" placeholder="红包金额" readonly v-model="money"/>
				</div>
				<div class="changeDiv">
					<p class="alertText">活动主题:</p>
					<input type="text" class="alertInput" placeholder="活动主题" readonly  v-model="activity_theme"/>
				</div>
				<div class="changeDiv">
					<p class="alertText">可用电站:</p>
					<input type="text" class="alertInput" placeholder="可用电站" readonly v-model="usableSite"/>
				</div>
				<div class="changeDiv">
					<p class="alertText">领取日期:</p>
					<input type="text" class="alertInput" placeholder="领取日期" readonly v-model="create_time"/>
				</div>
				<div class="changeDiv">
					<p class="alertText">开始时间:</p>
					<input type="text" class="alertInput" placeholder="开始时间" readonly v-model="start_time"/>
				</div>
				<div class="changeDiv">
					<p class="alertText">结束日期:</p>
					<input type="text" class="alertInput" placeholder="结束日期" readonly v-model="end_time"/>
				</div>
				<div class="changeDiv">
					<p class="alertText">使用类型:</p>
					<el-radio v-model="use_type" label="984001" class="firstRadio" disabled>充电账单</el-radio>
					<el-radio v-model="use_type" label="984002" disabled>服务费</el-radio>
					<el-radio v-model="use_type" label="984003" disabled>停车账单</el-radio>
					<el-radio v-model="use_type" label="984004" disabled>占位费</el-radio>
				</div>
				<div class="changeDiv">
					<p class="alertText">使用状态:</p>
					<input type="text" class="alertInput" placeholder="使用状态" readonly v-model="status"/>
				</div>
				<div class="changeDiv">
					<p class="alertText">使用时间:</p>
					<input type="text" class="alertInput" placeholder="使用时间" readonly v-model="use_time"/>
				</div>
				<div class="alertBut">
					<button class="isFalse" @click="closeAlert">取消</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:['items'],
		mounted(){
			this.redDetail()
		},
		data() {
			return {
				phone_num: '',//会员手机号
				money: '',//红包金额
				activity_theme: '',//活动主题
				usableSite: '',//可用站点
				create_time: '',//领取日期
				end_time: '',//结束日期
				start_time: '',//开始时间
				use_type: '',//使用类型
				status: '',//使用状态
				use_time: '',//使用状态
			}
		},
		methods: {
			closeAlert(){
				this.$emit('closeAlert')
			},
			redDetail() {
				this.phone_num = this.items.phone_num
				this.money = this.items.money
				this.activity_theme = this.items.activity_theme
				if(this.items.usableSite == 0 || this.items.usableSite == "0"){
					this.usableSite = '全部电站'
				}else{
					this.usableSite = this.items.usableSite
				}
				this.create_time = this.items.create_time
				this.end_time = this.items.end_time
				this.start_time = this.items.start_time
				this.use_type = this.items.use_type
				this.status = this.items.status
				this.use_time = this.items.use_time
			}
		}
	}
</script>

<style scoped>
	.changeDiv{
		width:83%;
	}
	.el-checkbox,.firstRadio{
		margin-left: 0.05rem;
	}
	.el-radio{
		margin-right: 0.1rem;
	}
</style>